<template>
  <div id="emp">

    <!--这是搜索栏-->
    <div class="search">
      手机号码：
      <el-input  placeholder="手机号码" style="width:200px"></el-input>
      供货商名称：
      <el-input  placeholder="请输入供货商名称" style="width:200px"></el-input>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
    </div>
    <!--这是操作按钮栏-->
    <div class="btnOption">
      <el-button type="danger" icon="el-icon-delete">批量删除</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="addSupplier = true">添加供货商</el-button>
      <el-button type="warning" icon="el-icon-bottom">导出EXCEL</el-button>
      <el-button type="info" icon="el-icon-top">读取EXCEL</el-button>
    </div>
    <!--数据显示栏-->
    <div class="data">
      <el-table
        border
        :data="suppliers"
        style="width: 100%"
        height="350">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          fixed
          prop="create_date"
          label="创建日期"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="供货商名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="200">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系人号码"
          width="120">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页栏-->
    <div class="page">
      <el-pagination
        :page-size="2"
        :pager-count="5"
        :page-sizes="[5, 10,15, 20]"
        layout="total,slot,sizes, prev, pager, next"
        :total="100">
        <span>当前第1页</span>
      </el-pagination>
    </div>

    <div>
    <!-- Form 添加供货商弹窗-->
    <el-dialog title="添加供货商" :visible.sync="addSupplier">
      <el-form :model="form">
        <el-form-item label="供货商名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addSupplier = false">取 消</el-button>
        <el-button type="primary" @click="addSupplier = false">确 定</el-button>
      </div>
    </el-dialog>
    </div>


  </div>
</template>

<script>
export default {
name: "Supplier",
  data (){
    return {
      suppliers:"",
      addSupplier: false,
      form: {
        name: '',
        address: '',
        phone: '',
        email: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
    }
  },
  mounted() {
    let _this=this;
    this.axios.get("/supplier")
      .then(function(response){
        console.log(response.data);
        _this.suppliers=response.data;

      })
      .catch(function(error) {
        console.log(error);
      });
  },
  methods: {
   /*删除供货商方法*/
    handleDelete() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
}
</script>

<style scoped>
#emp {
  width: 1000px;
  border:1px solid #DFDFDF;
  margin: 0 auto;
}
/*搜索总布局*/
#emp .search{
  width: 1000px;
  text-align: center;
  margin-top: 15px;
}
/*操作按钮总布局*/
#emp .btnOption{
  width: 1000px;
  height: 42px;
  line-height: 42px;
  border: 1px solid #DFDFDF;
  background-color: #F5FAFE;
  /* border-radius: 5px;*/
  text-align: left;
  margin-top: 15px;
}
#emp .btnOption .el-button{
  height: 35px;
}
/*表格数据总布局*/
#emp .data{
  width: 1000px;
  background-color: burlywood;
  margin-top: 15px;
}
/*分页总布局*/
#emp .page {
  width: 1000px;
  text-align: left;
  margin-top: 15px;
}
</style>
